<template>
    <div class="page">
        <header2></header2>
        <div class="home max-width">
            <!--<div class="img" :style="{backgroundImage:'url(' +json.logo.fullUrl + ')'}"-->
            <!--v-if="json.logo"></div>-->
            <images v-model="json.showImages"></images>
            <img class="sign" src="../../assets/sold.png" v-if="json.status == 'Offline' || !sku.stock"/>
            <img class="sign" src="../../assets/promotion.png" v-if="json.status == 'Promotion' && sku.stock"/>

            <div class="txt">
                <div style="font-size:2rem;margin:0 auto 2rem;">{{json.name}}</div>
                <div style="display:flex;justify-content: space-between"><label style="color:red;">{{sku.salePrice_yuan}}
                    人民币</label> <label>{{status_res}}</label></div>
                <hr/>
                <template v-if="sku.code">
                <div>编号：{{sku.code}}</div>
                </template>
                <template v-if="json.material">
                    <div>木种：{{json.material}}</div>
                </template>

                <template v-if="json.length">
                    <div>长度：{{json.length}}mm</div>
                </template>
                <template v-if="json.width">
                    <div class="line">宽度：{{json.width}}</div>
                </template>

                <template v-if="json.height">
                    <div class="line">高度：{{json.height}}mm</div>
                </template>
                <template v-if="json.thick">
                    <div class="line">厚度：{{json.thick}}mm</div>
                </template>

                <div>
                    {{json.detail}}
                </div>
                <div v-if="!sku1" v-for="skuDefine in json.skuDefines" class="sku">
                    <div class="key">{{skuDefine.key}}:</div>
                    <div class="v" v-for="it in skuDefine.value.Split(',')" @click="selectSku(skuDefine.key,it)"
                         :class="selected[skuDefine.key] == it ? 'selected':'' ">{{it}}
                    </div>
                </div>

                <div style="text-align: center;margin: 45px auto;">
                    <a v-if="json.taobaoUrl" :href="json.taobaoUrl" target="_blank" class="myButton"> 淘宝购买 </a>
                </div>

            </div>
        </div>
        <div class="detail max-width" style="margin:auto;">
            <div style="display: flex;flex-wrap:wrap;padding:16px;" v-if="json.parameters.length">
				<kv v-for="(item) in json.parameters" :key="item.key">
                    <template slot="k"> {{item.key}}</template>
                    {{item.value}}
                </kv>
            </div>

            <video :src="json.video.fullUrl" v-if="json.video.fullUrl" controls="controls" style="width:100%;"></video>

            <div class="img3" v-if="json.relationships.length">
                <div style="width: 100%;text-align: left;">为您推荐：</div>
				<router-link v-for="(item) in json.relationships" :to="'detail?id='+item.id" :key="item.id">

                    <img-hover :img1="item.img1.fullUrl" class="img" :img2="item.img2.fullUrl"></img-hover>
                    <div style="margin:6px;">{{item.name}}</div>
                </router-link>
            </div>

            <img :src="item.fullUrl" v-for="item in json.images"/>
        </div>
        <vfooter></vfooter>
    </div>
</template>

<script type="text/ecmascript-6">
    import header2 from '../../common/Header.vue';
    import vfooter from '../../common/Footer';
    import vlist from '../List';
    import images from "../../common/CarouselImages"
    import ImgHover from "../../../components/ImgHover";

    export default {
        components: {
            ImgHover,
            header2,
            vfooter,
            vlist, images
        },
        data: function () {
            return {
                json: {video: {}, images: [], parameters: [], relationships: []},
                sku1: true, //单Sku
                status_res: "",
                sku: {},
                selected: {} //  材质 :   木 ,
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            selectSku(skuKey, skuValue) {
                if (skuKey) {
                    this.selected[skuKey] = skuValue;
                }
                Object.assign(this.selected, {});
                this.sku = Object.assign({}, this.json.skuStockPrice.filter(it => it.skuDefine == Object.values(this.selected).join(","))[0]);

                if (!this.json.skuDefines.length) {
                    this.sku1 = true;
                } else if (this.json.skuDefines.length == 1 && this.json.skuDefines[0].value.split(",").length <= 1) {
                    this.sku1 = true;
                } else {
                    this.sku1 = false;
                }
            },
            loadData() {
                this.$http.post("/info/product/get", {productId: this.$route.query.id}).then(res => {
                    var json = res.data.data;
                    var it = json;
                    if (it.width2 && (it.width1 != it.width2)) {
                        it.width = it.width1 + "mm - " + it.width2 + "mm";
                    } else {
                        it.with = it.width1 + "mm";
                    }

                    it.guidePrice_yuan = parseInt(it.guidePrice / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    // it.salePrice_yuan = parseInt(it.salePrice / 100).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    it.salePrice_yuan = parseInt(it.skuStockPrice.filter(it => it.stock).map(it => it.salePrice).min() / 100).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');

                    jv.fillRes(it, "status", jv.ProductStatusEnum);

                    json.skuStockPrice.forEach(it => {
                        it.salePrice_yuan = parseInt(it.salePrice / 100).toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                    });

                    json.skuDefines.forEach(it => {
                        this.selected[it.key] = it.value.split(",")[0];
                    });

                    this.json = json;

                    this.selectSku();
                })
            }
        }
    }
</script>

<style scoped>
    .page {
    }

    .kv {
        margin: 4px;
        min-width: 150px;
    }

    .home {
        margin: 6rem auto 2rem;
        display: flex;
        position: relative;
    }

    .home .sign {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 99;
    }

    .home .img {
        width: 48rem;
        height: 48rem;
    }

    .home .txt {
        margin: 0 3rem;
        flex: 1;
    }

    .home .txt > div {
        margin: 1rem auto;
    }

    .home hr {
        width: 100%;
        height: 1px;
        background-color: lightgray;
    }

    .sku {
        display: flex;
    }

    .sku .key {
        min-width: 60px;
    }

    .sku .v {
        margin-right: 20px;
        padding: 8px;
        border: solid 1px lightgray;
        background-color: #eeeeee;
        min-width: 80px;
        text-align: center;
    }

    .sku .v.selected {
        border: solid 1px red;
        background-color: #eeeeee;
    }

    .detail img {
        width: 100%;
    }

    @media screen and (max-width: 60rem) {
        .home {
            flex-wrap: wrap;
        }


        .home .txt {
            margin-top: 4rem;
        }
    }

    .img3 {
        display: flex;
        padding: 16px;
        flex-wrap: wrap;
        justify-content: space-around;
        /*background-color: #9C27B0;*/
        text-align: center;
    }

    .img3 * {
        color: black;
    }

    .img3 > a {
        margin: auto 6px 20px;
    }

    .img3 .img {
        width: 22rem;
        height: 22rem;
        background-size: 105%;
        border-radius: 15px;
    }

</style>
